<template>
	<div id="container">
		<header>
			<van-nav-bar
			  title="积分详情"
			  left-text="返回"
			  right-text="礼券兑换"
			  left-arrow
			  @click-left="onClickLeft"
			  @click-right="onClickRight"
			/>
		</header>
		<div id="content">
			<!-- credit-show -->
			<div class="credit-show">
				 <h2>可用积分(1分=1元)</h2>
				 <h1>0</h1>
				 <h3>如何获取积分？</h3>
			</div>
			<!-- credit- -->
				<div class="credit-item">
					<van-icon name="gold-coin-o" />
					<h3>怎么可以没有积分</h3>
					<h4>下单就能赚</h4>
				</div>			
				
			
		</div>
	</div>
</template>

<script>
	export default{
		name:'Credit',
		methods:{
			onClickLeft(){
				this.$router.go(-1)
			},
			onClickRight(){
				this.$router.push('/giftconpon')
			}
		}
	}
</script>

<style scoped>
h1,h2,h3{
	padding: 0;
	margin: 0;
}
#container{
	height: 100vh;
	background: #f3f3f3;
}
/* --------------------credit-header----------------- */
header .van-nav-bar{
	height:47px;
	background: #f65050;
}
header .van-nav-bar__title{
	font-size:18px;
	font-weight:600;
	font-family:"楷体";
	color:#fefafb;
}
.van-nav-bar__text,.van-nav-bar__arrow{
	color:#fefafb;
	font-size:16px;
}
header .van-nav-bar__text{
	font-family: "楷体";
	font-weight:500;
}
/* -------------------credit-content-show------------ */
.credit-show{
	height: 138px;
	background:#f65050;
	overflow: hidden;
}
.credit-show h2,h1,h3{
	color: #ffffff;
	font-weight: 500;
	font-family: "楷体";
}
.credit-show h2{
	margin: 17px 0px 28px 42px;
	font-size: 15px;
}
.credit-show h1{
	margin: 0px 0px 19px 42px;
	font-size:30px;
}
.credit-show h3{
	margin-left:270px;
	font-size: 13px;
}
/* -------------------credit-tab----------------- */
.credit-item {
	text-align: center;

}
.credit-item .van-icon-gold-coin-o{
	font-size: 150px;
	color: #c0c4c7;
	margin-top:120px;
}
.credit-item h3{
	font-family: "楷体";
	font-size: 20px;
	color: #2b2b2b;
	font-weight: 600;
}
.credit-item h4{
	font-family: "楷体";
	font-size: 15px;
	color: #989898;
}
</style>
